<template>
    <div class="my_tickets">
        <x-header title="优惠券" :left-options="{backText: ''}" style="border-bottom:1px solid #e9e9e9;">
            <a slot="right">
                <img style="width:.46rem;height:.46rem;" src="../../assets/images/voucherMarket/more.png" alt="">
            </a>
        </x-header>
        <div class="content">
            <div class="nav_tabs">
                <tab :line-width="2" custom-bar-width="1.5rem">
                    <tab-item :selected="selectIndex===0" @on-item-click="onItemClick">未使用(10)</tab-item>
                    <tab-item :selected="selectIndex===1" @on-item-click="onItemClick">使用记录(20)</tab-item>
                    <tab-item :selected="selectIndex===2" @on-item-click="onItemClick">已过期(5)</tab-item>
                </tab>
            </div>
            <div class="content1" v-if="selectIndex===0">
                <div class="ticket1_lists" v-for="(item,index) in 5">
                    <div class="ticket1_list">
                        <img v-if="index<3" class="news" src="../../assets/images/voucherMarket/orange.png" alt="">
                        <div class="left">
                            <h6>￥<span>5</span></h6>
                            <p>满105元可用</p>
                        </div>
                        <div class="right">
                            <div class="top">
                                <h6>
                                    <span>团购券</span>
                                    <span>仅可购买自营电炖锅和多用途品类部分商品</span>
                                </h6>
                                <p>
                                    <span>2018.04.29-2018.05.28</span>
                                    <span>立即使用</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p @click="gives"><img src="../../assets/images/voucherMarket/share.png" alt="">可赠送</p>
                                <p @click="transfers"><img src="../../assets/images/voucherMarket/sell.png" alt="">转让</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content2" v-if="selectIndex===1">
                <div class="ticket1_lists" v-for="(item,index) in 6">
                    <div class="ticket1_list">
                        <div class="left">
                            <h6>￥<span>5</span></h6>
                            <p>满105元可用</p>
                        </div>
                        <div class="right">
                            <div class="top">
                                <h6>
                                    <span>团购券</span>
                                    <span>仅可购买自营电炖锅和多用途品类部分商品</span>
                                </h6>
                                <p>
                                    <span>2018.04.29-2018.05.28</span>
                                    <span>已使用</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p><img src="../../assets/images/voucherMarket/share.png" alt="">可赠送</p>
                                <p><img src="../../assets/images/voucherMarket/sell.png" alt="">转让</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content3" v-if="selectIndex===2">
                <div class="ticket1_lists" v-for="(item,index) in 4">
                    <div class="ticket1_list">
                        <img class="news" src="../../assets/images/voucherMarket/orange_grey.png" alt="">
                        <div class="left">
                            <h6>￥<span>5</span></h6>
                            <p>满105元可用</p>
                        </div>
                        <div class="right">
                            <div class="top">
                                <h6>
                                    <span>团购券</span>
                                    <span>仅可购买自营电炖锅和多用途品类部分商品</span>
                                </h6>
                                <p>
                                    <span>2018.04.29-2018.05.28</span>
                                    <span style="visibility:hidden;">立即使用</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p><img src="../../assets/images/voucherMarket/share.png" alt="">可赠送</p>
                                <p><img src="../../assets/images/voucherMarket/sell.png" alt="">转让</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>去领券</p>
            <p @click="goVouchers">去券集市</p>
        </footer>
        <!-- 赠送给好友 -->
        <popup v-model="show1" :hide-on-blur="false">
            <div class="give_friends">
                <div class="closes" @click="show1=false">
                    <p>赠送给好友</p>
                    <span>×</span>
                </div>
                <div class="ticket1_lists" style="margin-top:.15rem;">
                    <div class="ticket1_list">
                        <img style="visibility:hidden;" class="news" src="../../assets/images/voucherMarket/orange.png" alt="">
                        <div class="left">
                            <h6>￥<span>5</span></h6>
                            <p>满105元可用</p>
                        </div>
                        <div class="right">
                            <div class="top">
                                <h6>
                                    <span>团购券</span>
                                    <span>仅可购买自营电炖锅和多用途品类部分商品</span>
                                </h6>
                                <p>
                                    <span>2018.04.29-2018.05.28</span>
                                    <span style="visibility:hidden;">立即使用</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p><img src="../../assets/images/voucherMarket/share.png" alt="">可赠送</p>
                                <p style="visibility:hidden;"><img src="../../assets/images/voucherMarket/sell.png" alt="">转让</p>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="texts">赠送出的券在您的账户不能使用了哦，可以在使用记录中撤销赠送。</p>
                <p class="rules">优惠券赠送规则<span></span></p>
                <div class="shares">
                    <img src="../../assets/images/voucherMarket/friend.jpg" alt="">
                    <img src="../../assets/images/voucherMarket/friend_cicle.jpg" alt="">
                </div>
            </div>
        </popup>
        <!-- 转让 -->
        <popup v-model="show2" :hide-on-blur="false">
            <div class="transfers">
                <div class="closes" @click="show2=false">
                    <p>转让优惠券</p>
                    <span>×</span>
                </div>
                <div class="ticket1_lists" style="margin-top:.15rem;">
                    <div class="ticket1_list">
                        <img style="visibility:hidden;" class="news" src="../../assets/images/voucherMarket/orange.png" alt="">
                        <div class="left">
                            <h6>￥<span>5</span></h6>
                            <p>满105元可用</p>
                        </div>
                        <div class="right">
                            <div class="top">
                                <h6>
                                    <span>团购券</span>
                                    <span>仅可购买自营电炖锅和多用途品类部分商品</span>
                                </h6>
                                <p>
                                    <span style="font-size:.28rem;color:#060606;">兑换有效期</span>
                                    <span style="visibility:hidden;">立即使用</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p style="white-space:nowrap;">2018.04.29-2018.05.28</p>
                                <p style="visibility:hidden;"><img src="../../assets/images/voucherMarket/sell.png" alt="">转让</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="magic_coin">
                    <p>您预计可得魔币<img src="../../assets/images/voucherMarket/coin-26px.png" alt=""></p>
                    <h1>8</h1>
                </div>
                <h6>券价值10魔币，阿宝扣除2魔币<span>查看转让公约</span></h6>
                <div class="buttons">
                    <button>转让</button>
                    <button @click="show2=false">取消</button>
                </div>
            </div>
        </popup>
    </div>
</template>

<script>
    import {setCookie, getCookie, removeCookie, clearCookie} from '@/assets/js/cookie'
    import {XHeader, Tab, TabItem, Popup} from 'vux';

    export default {
        name: 'my_tickets',
        data() {
            return {
                selectIndex: 0, //0-未使用  1-使用记录  2-已过期
                show1: false,
                show2: false,
            }
        },
        components: {
            XHeader,
            Tab,
            TabItem,
            Popup
        },
        computed: {},
        created() {

        },
        methods: {
            onItemClick(val) {
                this.selectIndex = val;
            },
            //赠送
            gives(){
                this.show1 = true;
            },
            //转让
            transfers(){
                this.show2 = true;
            },
            //券集市
            goVouchers(){
                this.$router.push('/vouchers');
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .my_tickets {
        min-height: 100%;
        background: #fff;
        text-align: left;
        padding-bottom: .88rem;
        .ticket1_lists {
            padding-bottom: .18rem;
            .ticket1_list {
                width: 7.08rem;
                height: 2.25rem;
                margin: 0 auto;
                background: url('../../assets/images/voucherMarket/coupon-blue.png');
                background-size: 7.08rem 2.25rem;
                display: flex;
                align-items: center;
                position: relative;
                .news {
                    width: .92rem;
                    height: .69rem;
                    position: absolute;
                    right: .08rem;
                    top: .06rem;
                }
                .left {
                    text-align: center;
                    width: 2.58rem;
                    h6 {
                        font-size: .29rem;
                        color: #fff;
                        margin-bottom: .25rem;
                        span {
                            font-size: .63rem;
                        }
                    }
                    p {
                        font-size: .26rem;
                        color: #fff;
                    }
                }
                .right {
                    width: 4.5rem;
                    height: 1.84rem;
                    padding: 0 .18rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .top {
                        h6 {
                            width: 80%;
                            margin-bottom: .1rem;
                            display: -webkit-box;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            span:nth-of-type(1) {
                                width: .75rem;
                                height: .3rem;
                                border-radius: .2rem;
                                background: #5392d5;
                                font-size: .19rem;
                                color: #fff;
                                padding: .06rem .1rem;
                                margin-right: .1rem;
                            }
                            span:nth-of-type(2) {
                                font-size: .27rem;
                                color: #16151a;
                            }
                        }
                        p {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            span:nth-of-type(1) {
                                font-size: .2rem;
                            }
                            span:nth-of-type(2) {
                                display: block;
                                width: 1.3rem;
                                height: .44rem;
                                line-height: .44rem;
                                text-align: center;
                                background: #fff;
                                border: 1px solid #bacee6;
                                border-radius: .3rem;
                                font-size: .26rem;
                                color: #3c7ecd;
                                margin-right: .1rem;
                            }
                        }
                    }
                    .bottom {
                        display: flex;
                        p {
                            font-size: .22rem;
                            color: #202020;
                            display: flex;
                            align-items: center;
                            margin-right: .46rem;
                            img {
                                width: .26rem;
                                height: .26rem;
                                margin-right: .08rem;
                            }
                        }
                    }
                }
            }
        }
        .content {
            .content1, .content2, .content3 {
                padding: .38rem 0;
            }
            .content3{
                .ticket1_list{
                    background: url('../../assets/images/voucherMarket/coupon-blue-grey.png')!important;
                    background-size: 7.08rem 2.25rem!important;
                    .top{
                        h6{
                            span:nth-of-type(1) {
                                background: #939393!important;
                            }
                        }
                    }
                }
            }
        }
        footer{
            width: 7.5rem;
            height: .88rem;
            position: fixed;
            bottom: 0;
            left: 0;
            box-shadow: 0 -2px 0 0 #eee;
            -webkit-box-shadow: 0 -2px 0 0 #eee;
            display: flex;
            align-items: center;
            background: #fff;
            z-index: 99;
            p{
                width: 50%;
                height: .24rem;
                text-align: center;
                line-height: .24rem;
            }
            p:nth-of-type(1){
                border-right: 2px solid #000;
            }
        }
        .give_friends{
            height: 7.7rem;
            background: #f8f8f8;
            position: relative;
            .texts{
                font-size: .26rem;
                color: #202020;
                padding: 0 .14rem;
                margin: .28rem 0 .4rem 0;
            }
            .rules{
                font-size: .26rem;
                color: #276da4;
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    display: block;
                    width: .16rem;
                    height: .16rem;
                    border-top: 1px solid #1657a5;
                    border-right: 1px solid #1657a5;
                    transform: rotate(45deg);
                    margin-left: .06rem;
                }
            }
            .shares{
                width: 7.5rem;
                height: 2rem;
                background: #fff;
                box-shadow: 0 -2px 0 0 #eee;
                -webkit-box-shadow: 0 -2px 0 0 #eee;
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                img{
                    width: 1.13rem;
                    height: 1.45rem;
                }
            }
        }
        .transfers{
            height: 7.7rem;
            .magic_coin{
                display: flex;
                flex-flow: column;
                justify-content: center;
                align-items: center;
                margin: .28rem 0 .32rem 0;
                p{
                    display: flex;
                    align-items: center;
                    font-size: .29rem;
                    color: #090909;
                    img{
                        width: .36rem;
                        height: .36rem;
                        margin-left: .18rem;
                    }
                }
                h1{
                    font-size: .44rem;
                    color: #e12033;
                    margin-top: .1rem;
                }
            }
            >h6{
                font-size: .29rem;
                color: #090909;
                font-weight: 400;
                text-align: center;
                span{
                    color: #4b90d6;
                    margin-left: .12rem;
                }
            }
            .buttons{
                width: 7.5rem;
                height: 1.64rem;
                background: #fff;
                box-shadow: 0 -2px 0 0 #eee;
                -webkit-box-shadow: 0 -2px 0 0 #eee;
                position: absolute;
                bottom: 0;
                left: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                button{
                    border: none;
                    border-radius: .05rem;
                    width: 1.9rem;
                    height: .62rem;
                    line-height: .62rem;
                    text-align: center;
                    font-size: .28rem;
                }
                button:nth-of-type(1){
                    background: #ee3233;
                    color: #fff;
                }
                button:nth-of-type(2){
                    background: #eeeced;
                    color: #000;
                }
            }
        }
        .closes{
            height: .98rem;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background: #fff;
            p{
                font-size: .33rem;
                color: #89898b;
            }
            span{
                position: absolute;
                right: .2rem;
                top: .2rem;
                font-size: .4rem;
                color: #89898b;
            }
        }
    }
</style>